<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<script src="../dist/jquery-1.7.1.min.js"></script>
		<script src="../dist/jquery.positionToScroll.js"></script>
	

		<style>
			body {
				background-color: #ffffff;
				margin: 0;
				/*overflow: hidden;*/
			}
			#containerA{
				 background: -moz-linear-gradient(top, #ccc, #1a82f7);
				height: 600px;
			}
			#containerB{
				 background: -moz-linear-gradient(top, #2F2727, #1a82f7);
				height: 7000px;
			}
			#elementA{
				width: 100px;
				height: 100px;
				background: #000;
				position: fixed;
				z-index: 999;
				top:600px;
				box-shadow: 0px 0px 15px rgba(0,0,0,.5);
				margin: 0;
				padding: 0;
				transition:background 1s;
			}
			
		

		</style>
	</head>
	<body>
		<div id="containerA"></div>
		<div id="containerB"></div>
		<p id="elementA"></p>
		


		


		

		<script>
		$(document).ready(function () {
		   
		    $('#elementA').positionToScroll({starty:300,desty:2200,movedist:1200});


		});

			

		</script>
	</body>
</html>
